
<script setup>

import { ref, onMounted, getCurrentInstance } from 'vue'
import SearchView from '@/components/SearchView.vue'
import { useRouter } from 'vue-router'
import { isAddress, isContract } from '@/utils/web3'
import { math18, subAddress, onDownload, abiContract } from '@/utils/util'
import Copypage from '@/components/table/copypage.vue'
import Txstable from '@/views/txs/txstable.vue'
import tokentxnsTable from '@/views/tokentxns/tokentxnsTable.vue'
import { Download, CircleCheckFilled } from '@element-plus/icons-vue'
import Eventstable from './table/eventable.vue'
import IsVerify from './contract/isVerify.vue'
import NoVerify from './contract/noVerify.vue'

const router = useRouter()
const address = ref('')
const isContractAdd = ref(false)
const loadingdata = ref(true)
const loadingtx = ref(true)
const conloading = ref(true)


const balance = ref(null)
const tokenData = ref(null)
const data = ref(null)

const { proxy } = getCurrentInstance()

const txsList = ref([])

const totalCount = ref(0)

const ercList = ref([])
const ercTotalCount = ref(0)

const eventList = ref([])

const name = ref('Transactions')

const names = ref('')
const symbol = ref('')




onMounted(() => {
    // alert(router.currentRoute.value.params.id);
    address.value = router.currentRoute.value.params.id;
    if (isAddress(address.value)) {
        onInit()
        getData()
        getBalance()
        getTransactions()
        getTokenTransfers()

    }
})

const tabs = [
    { label: 'Transactions', name: 'Transactions' },
    { label: 'Erc20 Token Txns', name: 'Erc20' },
    { label: 'Contract', name: 'Contract', flag: isContractAdd.value },
    { label: 'Events', name: 'Events', flag: isContractAdd.value }
]

const getTransactions = () => {
    var url = "/api/Scan/Transactions"
    var param = {
        "address": address.value
    }
    proxy.$axios.post(url, param).then((res) => {
        setTimeout(() => {
            loadingtx.value = false
        }, 500)
        if (res.code == "Success") {
            txsList.value = res.data.list
            totalCount.value = res.data.totalCount
        }
    })
}

const getTokenTransfers = () => {
    var url = "/api/Scan/GetTokenTransfers"
    var param = {
        "pageNo": 1,
        "pageSize": 20,
        "address": address.value,
        "contract": ""
    }


    proxy.$axios.post(url, param).then((res) => {
        setTimeout(() => {
            loadingtx.value = false
        }, 500)
        if (res.code == "Success") {
            ercList.value = res.data.list
            ercTotalCount.value = res.data.totalCount
        }
    })
}

const getEvents = () => {

    var url = "/api/scan/GetEvents "
    var param = {
        "address": address.value,
    }
    proxy.$axios.post(url, param).then((res) => {
        // console.log(res)
        if (res.code == 200) {
            eventList.value = res.data
        }
    })
}

const getBalance = async () => {
    balance.value = await window.web3js.eth.getBalance(address.value)
}

const getData = () => {
    var url = "/api/Scan/Search"
    var param = {
        "content": address.value
    }
    setTimeout(() => {
        loadingdata.value = false
    }, 500)
    proxy.$axios.post(url, param).then((res) => {
        if (res.code == 'Success') {
            if (res.data.type === 'Address') {
                tokenData.value = res.data.value
            }
        }
    })
}

const getContract = () => {
    var url = "/api/Scan/GetContract"
    var param = {
        "address": address.value
    }
    setTimeout(() => {
        conloading.value = false
    }, 500)

    proxy.$axios.post(url, param).then((res) => {
        // console.log(res)
        if (res.code == 'Success') {
            data.value = res.data
            localStorage.setItem('params', res.data.params)
            // this.contract = true
        }
    })

}

const onInit = async () => {
    isContractAdd.value = await isContract(address.value);
    if (isContractAdd.value) {
        symbol.value = await abiContract(address.value, 'symbol')
        console.log(symbol.value)
        names.value = await abiContract(address.value, 'name')
        console.log(names.value)
    }
}


const onTabs = (val) => {
    name.value = val;
    // loadingtx.value = true;
    // if (val == tabs[0].name) {
    //     getTransactions()
    // }
    if (val == tabs[2].name) {
        getContract()
    }
    if (val == tabs[3].name) {
        getEvents()
    }
}


</script>

<template>
    <div class="address_box bg_box">
        <div class="container">
            <SearchView>
                <div class="s_tit">
                    <h3><i v-if="isContractAdd">Contract</i> Address</h3>
                    <Copypage :id="$route.params.id" :type="2" :isblue="true" :show="true" />
                    <i v-if="!isAddress($route.params.id)">(Invaild Address)</i>
                </div>
            </SearchView>

            <div class="info_container">
                <el-row class="t_info row" justify="space-between" :gutter="20">
                    <el-col :md="12">
                        <div class="card">
                            <h3><i v-if="tokenData && tokenData.isContract">Contract&nbsp;</i> Overview</h3>
                            <el-skeleton :rows="2" :loading="loadingdata" animated>
                                <p><i>TOK Balance :</i><span>{{ math18(balance) }} TOK</span></p>
                                <p><i>Token :</i><span></span></p>
                                <p></p>
                            </el-skeleton>
                        </div>
                    </el-col>
                    <el-col :md="12">
                        <div class="card">
                            <h3>More Info</h3>
                            <el-skeleton :rows="2" :loading="loadingdata" animated>
                                <p><i>My Name Tag :</i><span v-if="tokenData">{{
                                    tokenData.myNameTag }}</span></p>
                                <p>
                                    <i>ContractCreator:</i>
                                    <span v-if="tokenData && tokenData.isContract">
                                        <router-link
                                            v-if="tokenData.contractCreator && tokenData.contractCreator.length > 40"
                                            :to="'/address/' + tokenData.contractCreator">
                                            {{ subAddress(tokenData.contractCreator) }}
                                        </router-link>
                                        <span v-else>{{ subAddress(tokenData.contractCreator) }}</span>
                                        at txn
                                        <router-link v-if="tokenData.txn && tokenData.txn.length > 40"
                                            :to="'/tx/' + tokenData.txn">{{ subAddress(tokenData.txn) }}</router-link>
                                        <span v-else>{{ subAddress(tokenData.txn) }}</span>
                                    </span>
                                </p>
                                <p class="row">
                                    <i>TokenTracker: </i>
                                    <span v-if="tokenData && tokenData.isContract && symbol" class="col-md-8"><router-link
                                            :to="'/token/' + address">{{ names }}</router-link> ( {{
                                                symbol }}
                                        )</span>
                                </p>
                            </el-skeleton>
                        </div>
                    </el-col>
                </el-row>

            </div>

            <div class="add_tabs">
                <ul>
                    <li v-for="(item, i) in tabs" :key="i" :class="item.name == name && 'ups'" @click="onTabs(item.name)">
                        <span v-if="i == 0 || i == 1">{{ item.label }}</span>
                        <span v-if="i == 2 && isContractAdd" class="flex_ai">
                            {{ item.label }}
                            <el-icon v-if="tokenData?.isVerify" color="#00c9a7">
                                <CircleCheckFilled />
                            </el-icon>
                        </span>
                        <span v-if="i == 3 && isContractAdd">{{ item.label }}</span>
                    </li>
                </ul>
            </div>
            <div class="table_box" v-if="name == tabs[0].name">
                <div class="pad10">
                    <!-- Latest 23 from a total of 23 transactions -->
                    <el-row>
                        <el-col :md="12">
                            <div class="oldest">
                                <img src="../../assets/img/oldest.png" alt="" />
                                <el-tooltip class="item" effect="dark" :hide-after="0" content="Click to view full list"
                                    placement="top">
                                    <span>
                                        The total number of
                                        <router-link :to="'/txs?a=' + address">{{ totalCount }}</router-link>
                                        transactions
                                    </span>
                                </el-tooltip>
                            </div>

                        </el-col>
                        <el-col :md="12" v-if="txsList && txsList.length > 0">
                            <div class="plugin">
                                <button @click="onDownload(txsList, 'Address_Transactions')">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    <span>Download Page Data</span>
                                </button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-skeleton :rows="5" :loading="loadingtx" animated>
                    <Txstable :txsList="txsList" :address="address" />
                </el-skeleton>
            </div>

            <div class="table_box" v-if="name == tabs[1].name">
                <div class="pad10">
                    <el-row>
                        <el-col :md="12">
                            <div class="oldest">
                                <img src="../../assets/img/oldest.png" alt="" srcset="">
                                <el-tooltip class="item" effect="dark" :hide-after="0" content="Click to view full list"
                                    placement="top">
                                    <span>
                                        Latest
                                        <router-link :to="'/tokentxns?a=' + address">{{ ercTotalCount }}</router-link>
                                        ERC-20 Token Transfer Events
                                    </span>
                                </el-tooltip>
                            </div>
                        </el-col>
                        <el-col :md="12" v-if="ercList && ercList.length > 0">
                            <div class="plugin">
                                <button @click="onDownload(ercList, 'ERC20_Token_Txns')">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    <span>Download Page Data</span>
                                </button>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <el-skeleton :rows="5" :loading="loadingtx" animated>
                    <tokentxnsTable :ercList="ercList" :address="address" />
                </el-skeleton>
            </div>

            <div class="table_box" v-if="name == tabs[2].name">
                <el-skeleton :rows="2" :loading="conloading" animated>
                    <div v-if="data && data.isVerify">
                        <IsVerify :data="data" :code="true" />
                    </div>
                    <div v-if="data && !data.isVerify">
                        <NoVerify :data="data" />
                    </div>
                </el-skeleton>
            </div>

            <div class="table_box" v-if="name == tabs[3].name">
                <div class="oldest pad10">
                    <img src="../../assets/img/oldest.png" alt="" srcset="">
                    <el-tooltip class="item" effect="dark" :hide-after="0" content="Click to view full list"
                        placement="top">
                        <span>
                            Latest
                            {{ eventList && eventList.length }}
                            Contract Events
                        </span>
                    </el-tooltip>
                </div>
                <Eventstable :addList="eventList" :address="address" />
            </div>

            <div class="tips">
                <img src="../../assets/img/tips.png" alt="" />
                <p v-if="isContractAdd">
                    A contract address hosts a smart contract, which is a set of code stored on the blockchain that runs
                    when predetermined conditions are met. Learn more about addresses in our Knowledge Base.</p>
                <p v-else>
                    A wallet address is a publicly available address that allows its owner to receive funds from another
                    party. To access the funds in an address, you must have its private key. Learn more about addresses in
                    our Knowledge Base.</p>
            </div>

        </div>
    </div>
</template>



<style lang="less" scoped>
.address_box {
    .s_tit {
        display: flex;
        gap: 8px;
        align-items: center;
    }
}

.add_tabs {
    margin-bottom: 10px;

    ul {
        display: flex;
        align-items: center;
        gap: 8px;

        li {
            font-family: var(--font-medium);

            span {
                border-radius: 6px;
                background: #E5E5EA;
                display: block;
                padding: 4px 20px;
                font-size: 0.85rem;
                transition: .5s;
                cursor: pointer;
            }

            .flex_ai {
                display: flex !important;
                gap: 2px;
                align-items: center;
            }
        }

        li:hover span,
        .ups span {
            background: var(--primary-color);
            color: #fff;
        }
    }
}


.info_container {
    margin: 20px 0;

    .card {
        font-size: 0.9rem;
        background: #fff;
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0px 4px 10px 2px rgba(242, 242, 247, 0.5);
        border: 1px solid #F2F2F7;
        margin-bottom: 15px;

        h3 {
            font-family: var(--font-medium);
            margin-bottom: 10px;
        }

        p {
            border-bottom: 1px solid var(--color-border);
            height: 40px;
            line-height: 40px;

            i {
                display: inline-block;
                font-size: 0.9rem;
                padding-right: 20px;
                color: var(--color-text2);

            }
        }
    }


}

.oldest {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: var(--color-text2);

    img {
        width: 18px;
        height: 18px;
        margin-bottom: 3px;
    }
}

.contract_box {
    .contract_top {
        line-height: 24px;
        margin: 2.5rem 0;
    }
}

.contract_ipt {
    margin-top: 15px;
    padding-bottom: 12rem;

    textarea {
        color: #1e2022 !important;
        word-wrap: break-word;
        font-size: 1rem;
        line-height: 20px;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    }
}


.view_All {
    text-align: center;
    display: block;
    margin: 0 auto 5px;
    display: flex;
    justify-content: center;
    justify-content: center;

    a {
        background: none;
        color: #999;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>